<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vis Network | Edge Styles | Image Arrow Heads</title>

    <style type="text/css">
      html,
      body,
      #mynetwork {
        margin: 0px;
        padding: 0px;
      }

      #mynetwork {
        position: fixed;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 50%;
        min-height: 100vh;
        border-right: 1px solid lightgray;
        background: white;
      }

      #text {
        position: absolute;
        left: 50%;
        right: 0%;
        padding: 1em;
      }

      #title {
        margin-bottom: 5em;
      }

      pre {
        overflow-x: auto;
      }
    </style>

    <script
      type="text/javascript"
      src="../../../dist/vis-network.min.js"
    ></script>
    <link
      href="../../../dist/vis-network.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body>
    <div id="text">
      <div id="title">
        <h1>Vis Network</h1>
        <h2>Edge Styles</h2>
        <h3>Image Arrow Heads</h3>
      </div>

      <ul>
        <li>
          All formats supported by canvas are supported here (like SVG, PNG,
          JPG).
        </li>
        <li>Image can be specified using any URL including data URLs.</li>
        <li>
          Width and height can be set explicitly to scale the image to the
          desired size.
        </li>
        <li>
          The arrow head points to the top with the point in the middle of the
          top edge of the image.
        </li>
      </ul>

      <pre><code>
const options = {
  edges: {
    arrows: {
      to: {
        enabled: true,
        type: "image",
        imageWidth: 24,
        imageHeight: 24,
        src:
          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H9.18C9.6,1.84 10.7,1 12,1C13.3,1 14.4,1.84 14.82,3H19M12,8L7,13H10V17H14V13H17L12,8M12,3A1,1 0 0,0 11,4A1,1 0 0,0 12,5A1,1 0 0,0 13,4A1,1 0 0,0 12,3Z' /%3E%3C/svg%3E"
      }
    }
  }
};
      </code></pre>
    </div>

    <div id="mynetwork"></div>
    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" }
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 }
      ]);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        edges: {
          arrows: {
            to: {
              enabled: true,
              type: "image",
              imageWidth: 24,
              imageHeight: 24,
              src:
                "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H9.18C9.6,1.84 10.7,1 12,1C13.3,1 14.4,1.84 14.82,3H19M12,8L7,13H10V17H14V13H17L12,8M12,3A1,1 0 0,0 11,4A1,1 0 0,0 12,5A1,1 0 0,0 13,4A1,1 0 0,0 12,3Z' /%3E%3C/svg%3E"
            }
          }
        }
      };
      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>
